<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .zanwu{
            font-size:30px;
            text-align: center;
            line-height:100px;
            list-style-type: none;
        }
        [v-cloak]{
            display: none;
        }
        .ani1-enter{
            transform:translateX(-500px) ;
            opacity:0;
        }
        .ani1-enter-active{
            transition:all 1s;
        }
        .ani1-leave-to{
            transform: translateX(500px);
            opacity:0;
        }
        .ani1-leave-active{
            transition:all 1s;
        }
    </style>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="top clearfix" style="max-width:600px">
                <input type="text" v-model.trim="inputTxt" class="form-control pull-left" style="width:80%">
                <button @click="add" class="btn btn-info pull-right">增加一条留言</button>
            </div>
            <div id="main" aaa style="margin-top:30px; max-width:600px">
                <ul>
                    <transition-group name="ani1">
                 
                    <li 
                        class="well"
                        v-for="(msg,index) in arr"
                        v-cloak
                        :key="index"
                        >
                        {{
                            msg.content
                        }}
                        <div :class="msg.isCompleted?'bg-success':'bg-danger'">
                            {{!msg.isCompleted?'未完成':'已完成'}}
                        </div>
                        <button @click="changeState(index)">点击完成</button>
                        <button @click="del(index)">删除</button>
                    </li>
                </transition-group>
                </ul>
            </div>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                inputTxt:"",
                arr:[]
            },
            methods:{
                add(){
                    if(this.inputTxt === ""){
                        return;
                    }
                    this.arr.push({
                        content:this.inputTxt,
                        isCompleted:false
                    });
                    // 清空表单的值
                    this.inputTxt = "";
                },
                changeState(index){
                    console.log(this.arr[index]);
                    this.arr[index].isCompleted = !this.arr[index].isCompleted;
                },
                del(i){
                    if(confirm("您确认删除吗?")){
                        this.arr.splice(i,1);
                    }
                    /* 
                    
                    如何删除 数组中 指定位置的元素
                    splice()    删除 插入 替换
                     */
                }
            }
        })
    </script>
</body>
</html>